<template>
     <!-- 安装cnpm i @better-scroll/core -S -->
    <div>
        <div class="singer-scroll">
                <div class="left" ref="left">
                    <div>
                        <ul>
                            <li v-for="(item,index) in left" :key='index' @click="contorl(index,$event)" :class="num == index ?'active':''">{{item}}</li>
                        </ul>
                    </div>
                </div>
                <div class="right" ref="right">
                    <div >
                        <div  v-for="(item,index) in right" :key='index' class="list-item">
                            <div class="title">{{item.name}}</div>
                            <div class="content">
                                <ul>
                                    <li v-for="(key,i) in item.data" :key="i">
                                        <router-link :to='"/singer/singerList?id="+key.id+"&picUrl="+key.picUrl+"&name="+key.name'>
                                            <span class="img"><img src="../../assets/images/海报03.webp"></span>
                                            <span class="singer">{{key.name}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>
    import BScroll from '@better-scroll/core'
    export default {
        data() {
            return {
                listsHeight:[],//存储高度
                scrollY:"",//右侧滚动条高度  实时数据
            }
        },
        props:['left','right'],
        methods: {
            test(){
                console.log(111);
            },
                // 滚动效果初始化
                _initScroll(){
                    // 左侧滚动效果初始化
                    this.lefts = new BScroll(this.$refs.left,{
                        click:true,//点击触发
                        probeType:3,//深针的效果，实时获取滚动高度
                    })
                    // 右侧滚动效果初始化
                    this.rights = new BScroll(this.$refs.right,{
                        click:true,
                        probeType:3,//深针的效果，实时获取滚动高度
                    })
                    // 获取滚动高度
                    this.rights.on("scroll",(pos)=>{
                    this.scrollY = Math.abs(Math.round(pos.y)); //当前滚动条高度
                    })
                },
                // 获取右侧每个盒子的高度
                _getHeigth(){
                    let rightItems = this.$refs.right.getElementsByClassName("list-item")
                    let height = 0;
                    this.listsHeight.push(height)
                    for(let i = 0;i < rightItems.length; i ++){
                        let item = rightItems[i];
                        height += item.clientHeight;
                        this.listsHeight.push(height)
                    } 
                    // console.log(this.listsHeight);
                },
                // 左侧点击事件
                contorl(index,e){
                    if(!e._constructed){//如果不存在这个属性,则为原生点击事件，不执行下面的函数
                        return;
                    }else{
                        // 获取右侧所有对象
                        let rightItems = this.$refs.right.getElementsByClassName("list-item");
                        let el = rightItems[index]; //左侧点击位置，对应右侧滚动对象
                        // 插件内置方法scrollToElement(对象,滚动速度)
                        this.rights.scrollToElement(el,300);
                    }
                }

            },
            // 页面挂载后生命周期函数
            // 引入第三方js库
            // vue页面加载慢，第三方js库提前加载问题?
            // vm.$nextTick() 方法 保证vue执行完，页面挂载数据后，再执行第三方库
            mounted() {
                this.$nextTick(()=>{
                    this._initScroll();
                    this._getHeigth()
                })
            },
            computed:{
                num(){
                    for(let i = 0;i < this.listsHeight.length;i++){
                        let height = this.listsHeight[i];
                        let height2 = this.listsHeight[i+1];

                        if(!height2 || (this.scrollY >= height && this.scrollY < height2)){
                            // 控制左侧li位置
                            let leftItems = this.$refs.left.getElementsByTagName("li");
                            this.lefts.scrollToElement(leftItems[i],200);
                            return i;
                        }
                    }
                    return 0;
                }
            }
    }
</script>

<style lang="less">
        .singer-scroll{
            position: absolute;
            top: 80px;
            bottom: 54px;
            min-width: 320px;
            max-width: 750px;
            display: flex;
            background-color: rgb(245, 243, 243);
            overflow: hidden;
        }
        .left{
            width: 20px;
            position: absolute;
            right: 0;
            top: 50px;
            z-index: 100;
        }
        .left ul{
            width: 100%;
            list-style: none;
        }
        .left ul li{
            width: 100%;
            text-align: center;
            height: 20px;
            line-height: 20px;
            font-size: 9px;
            color: #575658
        }
        .left ul li.active{
            color: #d0281c;
        }
        .right{
            width: 100%;
        }
        .right .title{
            width: 100%;
            height: 18px;
            line-height: 18px;
            text-indent: 12px;
            background-color: #dadbdc;
            font-size: 10px;
            color: white;
        }
        .right ul{
            width: 100%;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }
        .right ul li{
          width: 97%;
          margin: 0 auto;
          padding: 4px;
          border-bottom: 2px solid #e7e7e7;
          a{
              width: 100%;
              height: 100%;
              display: block;
              z-index: 1000;
          }
            &:nth-last-child(1){
                border: none;
                padding-bottom:10px;
            }
            .img{
                width: 45px;
                height: 45px;
                display: inline-block;
                // background-color: salmon;
                vertical-align: middle;
                border-radius: 4px;
                margin-right: 15px;
                position: relative;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                    border-radius: 4px;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    left: 0;
                    margin: auto;
                }
            }
            .singer{
                font-size: 12px;
                color: #302f34;
            }
        }
</style>